<template>
  <div class="dashboard-section">
    <!-- 第二个框 -->
    <div class="left-bottom common-frame border">
      <!-- 第一块：标题和年份切换按钮 -->
      <div class="left-year-switch">
        <p class="left-year-switch-title">{{ title }}-公司矩阵图</p>
        <div class="custom-dropdown">
          <div class="dropdown-trigger" @click="showDropdown =!showDropdown">
            <span>{{ selectedYear }}</span>
            <span class="select-arrow"></span>
          </div>
          <div v-show="showDropdown" class="dropdown-content">
            <div
                v-for="year in years"
                :key="year.value"
                @click="selectYear(year.value)"
                class="dropdown-item"
            >
              {{ year.label }}
            </div>
          </div>
        </div>
      </div>
      <!-- 第二块：横向折线图 -->
      <div class="barChart011">
        <slot name="bar-chart"></slot>
      </div>
      <!-- 第三块：饼状图 -->
      <div class="pieChart011">
        <slot name="pie-chart"></slot>
      </div>
      <!-- 第四块：系统公告栏 -->
      <div class="system-announcement">
        <div class="announcement-wrapper">
          <p class="announcement-title">系统公告</p>
          <div class="announcement-content" v-show="filteredAnnouncements.length > 0">
            <ul class="announcement-list">
              <li v-for="(announcement, index) in filteredAnnouncements" :key="announcement.id">
                {{ announcement.title }}：{{ announcement.content }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, useSlots, defineEmits } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  selectedYear: {
    type: String,
    required: true
  },
  years: {
    type: Array,
    required: true
  },
  chartData: {
    type: Array,
    required: true
  },
  pieChartData: {
    type: Array,
    required: true
  },
  announcements: {
    type: Array,
    required: true
  }
});

// 控制下拉框显示隐藏
const showDropdown = ref(false);

// 过滤公告数据（只取第一个公告）
const filteredAnnouncements = ref(props.announcements.slice(0, 1));

// 定义事件
const emit = defineEmits(['selectYear']);

// 处理年份选择的方法
const selectYear = (year) => {
  // 触发父组件的年份选择事件
  emit('selectYear', year);
  showDropdown.value = false;
  console.log('当前区域选中的年份:', year);
};

let barChartInstance = null;
let pieChartInstance = null;

const initBarChart = (barChartRef) => {
  if (barChartRef) {
    if (barChartInstance) {
      barChartInstance.dispose(); // 销毁旧的柱状图实例
    }
    barChartInstance = echarts.init(barChartRef);
    const option = {
      xAxis: {
        type: 'category',
        data: props.chartData.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: props.chartData.map(item => item.value),
          type: 'bar'
        }
      ]
    };
    barChartInstance.setOption(option);
  }
};

const initPieChart = (pieChartRef) => {
  if (pieChartRef) {
    if (pieChartInstance) {
      pieChartInstance.dispose(); // 销毁旧的饼状图实例
    }
    pieChartInstance = echarts.init(pieChartRef);
    const option = {
      series: [
        {
          type: 'pie',
          data: props.pieChartData.map(item => ({ value: item.value, name: item.name }))
        }
      ]
    };
    pieChartInstance.setOption(option);
  }
};

const slots = useSlots();

onMounted(() => {
  const barChartRef = slots['bar-chart']?.()[0]?.el;
  const pieChartRef = slots['pie-chart']?.()[0]?.el;
  initBarChart(barChartRef);
  initPieChart(pieChartRef);
});

watch(
    () => [props.chartData, props.pieChartData],
    () => {
      const barChartRef = slots['bar-chart']?.()[0]?.el;
      const pieChartRef = slots['pie-chart']?.()[0]?.el;
      initBarChart(barChartRef);
      initPieChart(pieChartRef);
    }
);

// 监听公告数据变化
watch(
    () => props.announcements,
    (newAnnouncements) => {
      filteredAnnouncements.value = newAnnouncements.slice(0, 1);
    },
    { immediate: true }
);


onUnmounted(() => {
  if (barChartInstance) {
    barChartInstance.dispose();
    barChartInstance = null;
  }
  if (pieChartInstance) {
    pieChartInstance.dispose();
    pieChartInstance = null;
  }
});
</script>

<style scoped>
/* 样式部分 */
.dashboard-section {
  width: 100%;
}

.left-bottom {
  width: 100%;
  padding: 1.5rem;
}

.left-year-switch {
  font-size: clamp(0.3rem, 1vw, 2rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}

.left-year-switch-title {
  padding: clamp(0.3rem, 1vw, 10rem) clamp(1rem, 1vw, 6rem);
  margin: 0;
}

.custom-dropdown {
  position: relative; /* 为下拉内容的绝对定位提供参考 */
}

.dropdown-trigger {
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}

.select-arrow {
  width: 0;
  height: 0;
  /* 使用 em 单位让箭头大小随文字大小变化 */
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-top: 0.6em solid #ffffff;
  margin-left: 0.6em;
}

.dropdown-content {
  position: absolute; /* 绝对定位，脱离文档流 */
  top: 100%; /* 位于触发元素下方 */
  left: 0;
  background-color: #033b55; /* 下拉内容的背景颜色 */
  border: 1px solid #00d8ff; /* 下拉内容的边框 */
  min-width: 100px; /* 下拉内容的最小宽度 */
  z-index: 1; /* 确保下拉内容显示在其他元素之上 */
}

.dropdown-item {
  padding: 8px 12px; /* 下拉项的内边距 */
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

.dropdown-item:hover {
  background-color: #0e07ee; /* 下拉项悬停时的背景颜色 */
}

.barChart011 {
  height: clamp(10rem, 20vw, 30rem);
  padding: 0 1rem;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-bottom: clamp(1rem, 1vw, 2rem);
}

.pieChart011 {
  height: clamp(1rem, 20vw, 30rem);
  padding: 0 1rem;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center;
}

.system-announcement {
  width: 100%;
  line-height: clamp(1.2em, 3vw, 5em);
  background-color: rgba(235, 237, 239, 0.5);
}

.announcement-wrapper {
  margin: 0 clamp(0.3rem, 1vw, 10rem);
}

.announcement-title {
  padding: 1rem 0;
  font-size: clamp(0.3rem, 1vw, 2.6rem);
  font-weight: bold;
}

.announcement-list {
  font-size: clamp(0.3rem, 1vw, 1.8rem);
  font-weight: bold;
}
</style>